<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        *{
            margin: 0;
            padding: 0;
        }


        /* 所有的宽高都是基于设计图。当时由于我们没有设计图，只好通过谷歌浏览器的插件测量。 */


        /* 一般写上 */
        html,body{
            width: 100%;
            height: 100%;
        }

        #header{
            width: 100%;
            height: 686px;
            background: burlywood;
        }


        #content{
            width: 100%;
            height: 2060px;
            padding-top: 20px;
            background-color: gainsboro;
        }


        /* 中间区域需要水平居中 */
        #container{
            width: 1068px;
            height: 100%;
            margin: 0 auto;
        }


        #content-left{
            width: 780px;
            height: 100%;
            float: left;
            background: white;
        }

        /*
          四个小分区宽度一样；都有内边距；除最后一个外，底部都有margin.
          共有的属性，一般写在一起回好一些。方便同时修改，节省代码量。
        */
        #content-left>div{
            width: 780px;
            padding: 20px;
            margin-bottom: 20px;
            /*
             防止padding把区域变大。
             */
            box-sizing: border-box;
            background: olivedrab;
        }

        #hot-class{
            height: 355px;
        }

        #good-share{
            height: 500px;
        }
        #special-class{
            height: 355px;
        }
        #elaborate-class{
            height: 790px;
            /* 最后一个底部没有距离 */
            margin-bottom: 0;
        }

        #content-right{
            width: 270px;
            height: 100%;
            padding: 22px;
            float: right;
            /*防止内边距把区域变大*/
            box-sizing: border-box;
            background: white;
        }

        #footer{
            width: 100%;
            height: 350px;
            background: aquamarine;
        }

    </style>
</head>

<body>

<div id="header" ></div>

<div id="content">

    <div id="container">

        <div id="content-left">

            <div id="hot-class"></div>

            <div id="good-share"></div>

            <div id="special-class" ></div>

            <div id="elaborate-class" ></div>
        </div>

        <div id="content-right"></div>

    </div>

</div>

<div id="footer"></div>

</body>
</html>